/** 
 * 示例：（组织架构图页面有使用）
 * <div style="width:200px;height:200px;"
 *    v-tap="vuetouch"   // 无参数时，直接调用方法。vuetouch为自定义方法名
 *    v-longtap="{fn:vuetouch,name:'长按'}" // 有参数时，以对象的形式传入
 *    v-swipeleft="{fn:vuetouch,name:'左滑'}"
 *    v-swiperight="{fn:vuetouch,name:'右滑'}"
 *    v-swipeup="{fn:vuetouch,name:'上滑'}"
 *    v-swipedown="{fn:vuetouch,name:'下滑'}"
 *    >{{test}}</div>
 *
 * export default {
 *  data(){
 *    return {
 *      test: '测试手势动作'
 *    }
 *  },
 *  methods: {
 *    // s为返回的参数集合对象，e为手势事件event
 *    vuetouch(s,e){
 *      this.test = s.name
 *    }
 *  }
 * }
 * @type {{}}
 */
// 引入手势库
const GlobalDirective = {}

GlobalDirective.installed = false;

GlobalDirective.install = function install (vue) {
const Vue = vue;
  // 点击长按
function vueTouch (el, binding, type) {
      var _this=this;
      this.obj=el;
      this.binding = binding;
      this.touchType=type;
      this.vueTouches={x:0,y:0};
      this.vueMoves=true;
      this.vueLeave=true;
      this.longTouch=true;
      this.vueCallBack=typeof(binding.value)=="object"?binding.value.fn:binding.value;
      this.obj.addEventListener("touchstart",function(e){
        _this.start(e);
      },false);
      this.obj.addEventListener("touchend",function(e){
        _this.end(e);
      },false);
      this.obj.addEventListener("touchmove",function(e){
        _this.move(e);
      },false);
    };
  vueTouch.prototype={
    start:function(e){
      e.stopPropagation();
      this.vueMoves=true;
      this.vueLeave=true;
      this.longTouch=true;
      this.vueTouches={x:e.changedTouches[0].pageX,y:e.changedTouches[0].pageY};
      this.time=setTimeout(function(){
        if(this.vueLeave&&this.vueMoves){
          this.touchType=="longtap"&&this.vueCallBack(this.binding.value,e);
          this.longTouch=false;
        };
      }.bind(this),700);
    },
    end:function(e){
      e.stopPropagation();
      var disX=e.changedTouches[0].pageX-this.vueTouches.x;
      var disY=e.changedTouches[0].pageY-this.vueTouches.y;
      clearTimeout(this.time);
      if(Math.abs(disX)>10||Math.abs(disY)>100){
        this.touchType=="swipe"&&this.vueCallBack(this.binding.value,e);
        if(Math.abs(disX)>Math.abs(disY)){
          if(disX>10){
            this.touchType=="swiperight"&&this.vueCallBack(this.binding.value,e);
          };
          if(disX<-10){
            this.touchType=="swipeleft"&&this.vueCallBack(this.binding.value,e);
          };
        }else{
          if(disY>10){
            this.touchType=="swipedown"&&this.vueCallBack(this.binding.value,e);
          };
          if(disY<-10){
            this.touchType=="swipeup"&&this.vueCallBack(this.binding.value,e);
          };
        };
      }else{
        if(this.longTouch&&this.vueMoves){
          this.touchType=="tap"&&this.vueCallBack(this.binding.value,e);
          this.vueLeave=false
        };
      };
    },
    move:function(e){
      e.stopPropagation();
      this.vueMoves=false;
    }
  };

  // 单击
  Vue.directive("tap", {
    bind:function(el,binding) {
      new vueTouch(el,binding,"tap");
    }
  });
  // 滑动
  Vue.directive("swipe",{
    bind:function(el,binding){
      new vueTouch(el,binding,"swipe");
    }
  });
  // 左滑
  Vue.directive("swipeleft",{
    bind:function(el,binding){
      new vueTouch(el,binding,"swipeleft");
    }
  });
  // 右滑
  Vue.directive("swiperight",{
    bind:function(el,binding){
      new vueTouch(el,binding,"swiperight");
    }
  });
  // 下滑
  Vue.directive("swipedown",{
    bind:function(el,binding){
      new vueTouch(el,binding,"swipedown");
    }
  });
  // 上滑
  Vue.directive("swipeup",{
    bind:function(el,binding){
      new vueTouch(el,binding,"swipeup");
    }
  });
  // 长按
  Vue.directive("longtap",{
    bind:function(el,binding){
      new vueTouch(el,binding,"longtap");
    }
  });
  // 双指触控包装成指令
  Vue.directive("pinch",{
    bind:function(el,binding){
      new doubleTouch(el,"pinchstart pinchmove",binding);
    }
  });
  /**
   * 过滤特殊符号，只接受数字、小数点、负号'-'
   */
  Vue.directive("locknum",{
    bind:function(el,binding){
      el.addEventListener('keyup', function(e){
        let obj = e.target;
        //先把非数字的都替换掉，除了数字和.
        obj.value = obj.value.replace(/[^\d\.]/g,'');
        //必须保证第一个为数字而不是.
        obj.value = obj.value.replace(/^\./g,'0.');
        //保证只有出现一个.而没有多个.
        obj.value = obj.value.replace(/\.{2,}/g,'.');
        //保证.只出现一次，而不能出现两次以上
        obj.value = obj.value.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
        //只能输入两个小数
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
      })
    }
  });
};

export default GlobalDirective;
